<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { cloneDeep } from 'lodash'
import { onMounted, ref, reactive, onBeforeUnmount, watch } from 'vue'
let myChart = null
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  data3: {
    type: Array,
    default: () => [],
  },
  data: {
    default: () => [],
  },
  limit: {
    type: Array,
    default: () => [0, 4],
  },
  isLoop: {
    type: Boolean,
    default: true,
  },
  legendText: {
    type: Array,
    default: () => ['电动自行车总数', '自查清理数量'],
  },
  grid: {
    type: Object,
    default: () => ({
      top: '15%',
      left: '0%',
      right: '10%',
      bottom: '10%',
      containLabel: true,
    }),
  },
})
const propsCopy = reactive({
  data: cloneDeep(props.data),
})
const option = ref({
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow',
      label: {
        show: true,
      },
    },
    formatter: function (params) {
      // 保留原有的 tooltip 样式，插入百分号并返回格式化后的 tooltip 内容
      var tooltipText =
        params.marker + params.name + ': ' + params.value + '%'
      return tooltipText
    },
  },
  legend: {
    top: 'top',
    textStyle: {
      color: '#ffffff',
      fontSize: 12,
    },
  },
  // toolbox: {
  //   show: true,
  //   feature: {
  //     mark: { show: true },
  //     dataView: { show: true, readOnly: false },
  //     restore: { show: true },
  //     saveAsImage: { show: true },
  //   },
  // },
  series: [
    {
      // 系列名称，用于tooltip的显示，legend的图例筛选
      // name: '中间',
      // 图表类型，这里是饼图
      type: 'pie',
      // 饼图的位置，使用相对于容器的百分比表示
      center: ['50%', '59%'],
      // 饼图的半径，使用相对于容器的百分比表示，数组的第一项是内半径，第二项是外半径，实现圆环效果
      radius: ['40%', '59%'],
      // 下面圆环的样式
      itemStyle: {
        borderRadius: 5, // 圆环的边框圆角
        // borderColor: '#fff', // 圆环的边框颜色
        // borderWidth: 2, // 圆环的边框宽度
      },
      // 高亮时的样式
      emphasis: {
        itemStyle: {
          shadowBlur: 10, // 阴影模糊半径
          shadowOffsetX: 0, // 阴影水平偏移
          shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
        },
      },
      // 标签相关配置
      label: {
        show: true, // 是否显示标签
        formatter: '{c}%', // 标签内容格式化，这里显示百分比
        textStyle: {
          fontSize: 16, // 标签文字的字体大小
          color: '#fff', // 标签文字的颜色
        },
      },
      // 标签引导线相关配置
      labelLine: {
        // show: false, // 是否显示标签引导线
      },
      // 数据项列表
      data: props.data,
    },
  ],
})
const chart = ref()
const timer1 = null
function _clearInterval(timeId) {
  timeId && window.clearInterval(timeId)
}
const resizeHandler = () => {
  myChart.resize()
}
const initCharts = () => {
  chart.value.removeAttribute('_echarts_instance_')
  myChart = echarts.init(chart.value)
  myChart.setOption(option.value)
  window.addEventListener('resize', resizeHandler)
}
watch(
  () => props,
  (newValue, oldValue) => {
    propsCopy.data = cloneDeep(newValue.data)
    myChart.setOption({
      series: [
        {
          data: propsCopy.data,
        }
      ],
    })
  },
  { deep: true }
)
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
})
onMounted(() => {
  initCharts()
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
